<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>CSS 边框</title>
	<style>
		body {
			margin: 0;
			padding: 0;
			background-color: #F7F7F7;
		}
		.board {
			width: 600px;
			height: 440px;
			margin: 80px auto;
			background-color: #FFF;
		}
		.android {
			width: 340px;
			padding-top: 40px;
			margin: 0 auto;
			position: relative;
		}
		/*脑袋*/
		.head {
			width: 220px;
			height: 100px;
			margin: 0 auto 10px;
			border-radius: 100px 100px 0 0;
			background-color: #A4CA39;
			position: relative;
		}
		/*眼晴*/
		.head::before,
		.head::after {
			content: '';
			display: block;
			width: 20px;
			height: 20px;
			background-color: #FFF;
			border-radius: 10px;
			position: absolute;
			top: 40px;
		}
		.head::before {
			left: 50px;
			transition:all 0.3s;
		}

		.head::after {
			right: 50px;
			transition:all 0.3s;
		}

		.android:hover  .head::before{
			transform:translate(30px)
		}
		.android:hover  .head::after{
			transform:translate(5px)
		}
		
		/*身体*/
		.body {
			width: 220px;
			height: 180px;
			margin: 0 auto;
			background-color: #A4CA39;
			border-radius: 0 0 20px 20px;
			position: relative;
		}
		/*腿*/
		.body::before,
		.body::after {
			content: '';
			display: block;
			width: 50px;
			height: 80px;
			background-color: #A4CA39;
			border-radius: 0 0 25px 25px;
			position: absolute;
			bottom: -80px;
		}

		.body::before {
			left: 40px;
		}

		.body::after {
			right: 40px;
		}
		/*胳膊*/
		.arms {
			width: 340px;
			height: 150px;
			position: absolute;
			top: 150px;
		}
		.arms::before,
		.arms::after {
			content: '';
			display: block;
			width: 50px;
			height: 150px;
			background-color: #AcCA39;
			border-radius: 25px;
			position: absolute;
		}

		.arms::before {
			left: 0;
			transition:all 1s;
			transform-origin: center 10px;
		}
		.arms::after {
			right: 0;
			transition:all 1s;
			transform-origin: center 10px;

		}

		.android:hover .arms::after{
			transform:rotate(-1000deg);
			height:200px;
		}

		.android:hover .arms::before{
			transform:rotate(900deg);

		}
	</style>
</head>
<body>
	<div class="board">
		<div class="android">
			<div class="head"></div>
			<div class="body"></div>
			<div class="arms"></div>
		</div>
	</div>
</body>
</html>